import React, { useEffect, useState } from "react";
import moment from "moment";

export default function ClockCom() {
  //定义状态
  let [timeStr, setTimeStr] = useState(moment().format("YYYY-MM-DD HH:mm:ss"));

  //模拟componentDidMount
  useEffect(() => {
    //启动定时器
    let timer = setInterval(() => {
      // console.log("run run ");
      setTimeStr(moment().format("YYYY-MM-DD HH:mm:ss"));
    }, 1000);
    //组件卸载时, 清除定时器
    return () => {
      //清除
      clearInterval(timer);
    }
  }, []);

  return (
    <div
      style={{ display: "inline-block", padding: 30, border: "solid 1px #908" }}
    >
      {/* 使用状态 */}
      {timeStr}
    </div>
  );
}
